import React from 'react';
import { useConfig } from '../context/ConfigContext';
import { useLanguage } from '../context/LanguageContext';

const AboutView: React.FC = () => {
  const { config } = useConfig();
  const { t } = useLanguage();

  return (
    <div className="container mx-auto px-4 py-12 space-y-16">
      <div className="text-center space-y-4">
        <h2 className="text-4xl font-serif font-bold text-brand-wood">{t.about.title}</h2>
        <div className="w-24 h-2 bg-brand-orange mx-auto rounded-full"></div>
      </div>

      <div className="max-w-4xl mx-auto">
        <div className="aspect-video w-full bg-gray-200 rounded-2xl overflow-hidden relative group cursor-pointer shadow-2xl border-4 border-brand-cream">
          <img src={config.introVideoUrl} alt="Video Thumbnail" className="w-full h-full object-cover" />
          <div className="absolute inset-0 flex items-center justify-center bg-black/20 group-hover:bg-black/30 transition-all">
            <div className="w-20 h-20 bg-brand-orange rounded-full flex items-center justify-center pl-1 shadow-lg text-white">
              <div className="border-y-[10px] border-y-transparent border-l-[20px] border-l-white"></div>
            </div>
          </div>
        </div>
        <p className="text-center mt-4 text-brand-stone italic">{t.about.videoCaption}</p>
      </div>

      <div className="max-w-3xl mx-auto text-center space-y-6 bg-brand-cream p-8 rounded-xl">
        <h3 className="text-2xl font-serif text-brand-wood font-bold">{t.about.storyTitle}</h3>
        <p className="text-lg text-gray-700 leading-relaxed font-sans">{config.companyIntro}</p>
      </div>
    </div>
  );
};

export default AboutView;

